<template>
  <div id="box">
    <el-container>
      <el-header>
        <span>新增部门</span>
        <a class="right return" href="javascript:;" @click="back()">< 返回</a>
      </el-header>
      <div id="content">
        <p class="jiben">基本详情</p>
        <ul class="left">
          <li>
            <p>部门名称</p>
            <el-input v-model="name" placeholder="部门名称"></el-input>
          </li>
          <li>
            <p>部门编号</p>
            <el-input v-model="number" placeholder="部门编号"></el-input>
          </li>

          <li>
            <p>部门负责人</p>
            <el-input
              v-model="departmentHead"
              placeholder="部门负责人"
            ></el-input>
          </li>
        </ul>
        <ul class="right">
          <li>
            <p>负责人联系方式</p>
            <el-input
              v-model="telephone"
              placeholder="负责人联系方式"
              
            ></el-input>
          </li>
          <li>
            <p>负责人邮箱</p>
            <el-input v-model="email" placeholder="邮箱" ></el-input>
          </li>
          <li>
            <p>部门人数</p>
            <el-input v-model="total" placeholder="人数"></el-input>
          </li>
          <li>
            <p>部门介绍</p>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea"
            >
            </el-input>
          </li>
          <li>
            <p>创建日期</p>
            <el-date-picker
              v-model="entryTime"
              type="datetime"
              placeholder="年/月/日"
            >
            </el-date-picker>
          </li>
        </ul>
      </div>
    </el-container>
    <div id="footBox">
      <div id="footer">
        <el-button type="info" @click="cancle" :plain="true">取消</el-button>
        <el-button type="success" @click="baocun" :plain="true">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddDepartment",
  data: function () {
    return {
      textarea: "", //部门介绍
      name: "", //部门姓名
      number: "", //部门编号
      departmentHead: "", //部门负责人
      telephone: "", //联系方式
      entryTime: "", //创建时间
      email: "", //邮箱
      total: "", //人数
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  methods: {
    
            //手机号验证
            phoneyz() {
                var reg = /^1[3-9]\d{9}$/;
                if (!reg.test(this.phone)) {
                    this.$message.error('手机格式不正确，请重新输入！');
                }
            },

            //邮箱验证
            emailyz() {
                //邮箱正则
                var emreg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (!emreg.test(this.email)) {
                    this.$message.error('邮箱格式不正确，请重新输入！');
                }
            },
    //取消
    cancle() {
      this.$confirm("检测到有未保存的内容，确认是否离开？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "保存",
        cancelButtonText: "离开",
      })
        .then(() => {
          this.baocun();
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ?  "放弃保存并离开页面" : "停留在当前页面",
              
          });
          this.$router.push("/departmentList");
        });
    },
    //保存
    baocun() {
      if (this.name == "" || this.departmentHead == "") {
        this.$message({
          showClose: true,
          message: "请填写完整信息！",
          type: "warning",
        });
      } else {
        this.$axios({
          url: "/department/add",
          method: "post",
          data: {
            createTime: this.entryTime,
            departmentName: this.name,
            email: this.email,
            id: this.number,
            total: this.total,
            introduce: this.textarea,
            name: this.departmentHead,
            phone: this.telephone,
          },
        })
          .then((res) => {
            if (res.data.code == 0) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.$router.push("/departmentList");
            }else{
              this.$message.error(`${res.data.msg}`);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    //返回
    back() {
      this.$router.go(-1);
    },
    //   //新增部门
    //   AddDepartment() {
    //     this.$axios({
    //       url: "/Department/add",
    //       method: "post",
    //       data: {
    //         createTime: this.entryTime,
    //         departmentName: this.name,
    //         email: this.email,
    //         id: this.number,
    //         total: this.total,
    //         introduce: this.textarea,
    //         name: this.departmentHead,
    //         phone: this.telephone,
    //       },
    //     })
    //       .then((res) => {
    //         console.log(res);
    //       })
    //       .catch((err) => {
    //         console.log(err);
    //       });
    //   },
  },
};
</script>

<style scoped lang="less">
@contentbgcolor: white;
@margin: 10px;
ul {
  padding: 0;
}
a {
  text-decoration: none;
  color: #333333;
}
li {
  list-style: none;
  margin-top: 15px;

  p {
    margin: 0;
  }
}

#box {
  background: #f2f2f6;
}

.el-container {
  margin: 0;
  padding: 0;
}

.el-header {
  margin-top: 20px;
  background-color: @contentbgcolor;
  color: #333;
  text-align: left;
  line-height: 60px;
  font-size: 20px;
  .right {
    float: right;
    margin-right: 10px;
  }
  .return {
    color: #333;
    float: right;
    font-size: 18px;
    cursor: pointer;
  }
  .return:hover {
    color: #8cc5ff;
  }
}

#content {
  background: @contentbgcolor;
  margin-top: 10px;

  .jiben {
    margin-left: 10px;
  }

  .left {
    float: left;
    margin-left: @margin;

    .img {
      width: 150px;
      height: 150px;
      border-radius: 50%;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .el-upload {
      .el-button {
        margin-left: 35px;
        margin-top: 5px;
      }
    }
  }

  .right {
    float: right;
    margin-right: @margin;
  }

  .el-input,
  .el-select {
    width: 610px;
    height: 50px;
  }
}
#footBox {
  width: 100%;
  height: 350px;
  background: white;
}
#footer {
  margin-left: 43%;
  height: 200px;
  .el-button {
    float: left;
    margin-top: 100px;
  }
}
</style>                                                                 